<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus';
//定义ip地址
const ip = "http://8.137.80.202:8081/"
/*
      菜品的查询模块
*/
//定义搜索条件
const searchConditions = ref({
    year:'2024',
    name: '',
    id: ''
})
//分页条数据模型
const page = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getAllAnime();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    page.value = num
    getAllAnime();
}
//定义表格数据
const anime = ref([])
//定义获取观看记录的函数和搜索函数
const getAllAnime = async () => {
    let result;
    result = await axios.get(ip + 'anime/watched/' + searchConditions.value.year +'?page=' + page.value + "&pageSize=" + pageSize.value,{params:{...searchConditions.value}})
    if (result.data.code === 1) {
        total.value = result.data.data.total
        anime.value = result.data.data.rows
    } else {
        alert("查询失败")
    }
}

getAllAnime();

//定义重置搜索函数
const reset = () => {
    searchConditions.value.id = '';
    searchConditions.value.name = '';
    searchConditions.value.year = '2024'
    getAllAnime();
}

/*
    记录的新增模块
*/
//控制抽屉是否显示
const visibleDrawer = ref(false)
//添加表单数据模型
const animeModel = ref({
    watchTime:'',
    name: '',
    broadcastTime:'',
    bangumiScore: '',
    episode:'',
    year:''
})
//清除表单数据函数
const clearFormData = () => {
    animeModel.value.watchTime = ''
    animeModel.value.name = ''
    animeModel.value.broadcastTime = ''
    animeModel.value.bangumiScore = ''
    animeModel.value.episode = ''
}

//保存观看记录的函数
const addAnime = async () => {
    let result;
    animeModel.value.year = animeModel.value.watchTime.substring(0,4)
    // animeModel.value.year = searchConditions.value.year
    const data = JSON.stringify(animeModel.value)
    result = await axios.post(ip+'anime/watched/add', data, {
        headers: {
            'Content-Type': 'application/json'
        }
    })
    if (result.data.code === 1) {
        ElMessage({type:"success",message:"保存成功"})
        getAllAnime()
    } else {
        alert("保存失败")
    }
}
/*
*     菜品编辑的模块(复用新增菜品的数据模型)
*/
//定义变量,控制标题展示
const title = ref('')
//展示编辑抽屉,数据回显
const showDrawer = (row) =>{
    visibleDrawer.value=true,title.value='编辑记录'
    //数据回显
    animeModel.value.watchTime = row.watchTime
    animeModel.value.name = row.name
    animeModel.value.broadcastTime = row.broadcastTime
    animeModel.value.bangumiScore = row.bangumiScore
    animeModel.value.episode = row.episode
    animeModel.value.year = row.watchTime.substring(0,4)
    //扩展id属性,便于修改后端
    // animeModel.value.id = row.id
}

//修改记录的函数
const saveAnime = async() =>{
    // let result;
    // const data = JSON.stringify(animeModel.value)
    // result = await axios.post(ip+"anime/watched/update",data,{
    //     headers:{
    //         'Content-Type':'application/json'
    //     }
    // })

    // if(result.data.code===1){
    //     alert('修改成功')
        
    // }else{
    //     alert("修改失败")
    // }

    ElMessage({type:"warning",message:"此功能暂时有bug,还不能使用"})

}

    
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>观番记录</span>
                <div class="extra">
                    <el-button type="primary" @click="visibleDrawer = true,title='新增观看记录',clearFormData()">新增观看记录</el-button>
                </div>
            </div>
        </template>
        <!-- 搜索栏 -->
        <el-form :inline="true" :model="searchConditions" class="demo-form-inline">
            <el-form-item label="番名:">
                <el-input v-model="searchConditions.name" placeholder="请输入番名" clearable />
            </el-form-item>
            <el-form-item label="年份">
                <el-select v-model="searchConditions.year" placeholder="请选择年份" clearable style="width: 90px;">
                    <el-option label="2023" value="2023" @click="getAllAnime()"/>
                    <el-option label="2024" value="2024" @click="getAllAnime()"/>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getAllAnime">搜索</el-button>
                <el-button type="default" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table :data="anime" height="100%" style="width: 100%">

            <el-table-column label="观看时间" prop="watchTime"></el-table-column>
            <el-table-column label="番名" prop="name"></el-table-column>
            <el-table-column label="放送日期" prop="broadcastTime"></el-table-column>
            <el-table-column label="Bangumi评分" prop="bangumiScore"></el-table-column>
            <el-table-column label="剧集" prop="episode"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click="showDrawer(row)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[10, 15, 20, 25]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
        <!-- 抽屉 -->
        <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
            <!-- 添加番剧表单 -->
            <el-form :model="animeModel" label-width="100px">
                <el-form-item label="观看时间">
                    <el-input v-model="animeModel.watchTime" placeholder="请输入观看时间"></el-input>
                </el-form-item>
                <el-form-item label="番名">
                    <el-input v-model="animeModel.name" placeholder="请输入番名"></el-input>
                </el-form-item>
                <el-form-item label="放送日期">
                    <el-input v-model="animeModel.broadcastTime" placeholder="请输入放送日期"></el-input>
                </el-form-item>
                <el-form-item label="Bangumi评分">
                    <el-input v-model="animeModel.bangumiScore" placeholder="请输入Bangumi评分"></el-input>
                </el-form-item>
                <el-form-item label="观看剧集">
                    <el-input v-model="animeModel.episode" placeholder="请输入观看剧集"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="title==='编辑记录' ? saveAnime():addAnime(), visibleDrawer = false, clearFormData()">保存</el-button>
                    <el-button type="info" @click="visibleDrawer = false, clearFormData()">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
        
    </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* 抽屉样式 */
.avatar-uploader {
    :deep() {
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }
}

.editor {
    width: 100%;

    :deep(.ql-editor) {
        min-height: 200px;
    }
}
</style>